<template>
  <div>
    <van-sticky>
      <div class="main-box-top">
        <div class="box-center">
          <img src="@/assets/image/logo.png" alt="">
          <div class="right">
            <span><i class="iconfont icon-touxiang2"></i>管理员</span>
            <span><van-icon @click="show=!show" size="20" name="list-switch" /></span>
          </div>
        </div>

      </div>
    </van-sticky>
    <van-popup :overlay="false" v-model="show" position="right" :style="{ height: '80vh',width:'50vw',background:'none' }">
      <div class="box-1">
        <div class="btn-box" @click="changeItem(item)" :class="{boxdef:active !== item.id}" v-for="(item,index) in list" :key="index">
          {{item.name}}
        </div>

        <div @click="removeLogin" class="btn-box boxdef">
          注销登录
        </div>
      </div>

    </van-popup>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        active:11,
        show:false,
        list:[
          {id:10,name:'我的首页',path:'/',img:require('@/assets/image/1.jpg'),show:true,tip:'当秋风轻柔地拂过大地，秋日的园林宛如一幅绚丽多彩的画卷，缓缓展现在我们眼前。'},
          // {id:11,name:'任务管理',path:'/admin/index',img:require('@/assets/image/2.jpg'),show:true,tip:'走进秋日的园林，首先映入眼帘的是那一片灿烂的金黄。'},
          {id:12,name:'进入课室',path:'/teacher',img:require('@/assets/image/3.jpg'),show:true,tip:'银杏树像是被大自然的画笔精心描绘过一般，满树的黄叶在阳光的照耀下熠熠生辉。'},
          {id:13,name:'我的考勤',path:'/attention',img:require('@/assets/image/1.jpg'),show:true,tip:'当秋风轻柔地拂过大地，秋日的园林宛如一幅绚丽多彩的画卷，缓缓展现在我们眼前。'},
          // {id:14,name:'考勤管理',path:'/attend/index',img:require('@/assets/image/4.jpg'),show:true,tip:'微风吹过，树叶纷纷飘落，如同一只只金色的蝴蝶在空中翩翩起舞，给大地铺上了一层柔软的金色地毯。'},
         ]
      }
    },
    methods:{
      changeItem(item){
        this.active = item.id
        this.loading=true
        setTimeout(()=>{
          this.loading=false
        },1000)
        this.$router.push(item.path).catch(err=>{})
      },
      removeLogin(){
        this.$router.push('/login').catch(err=>{})
      }
    },
    mounted() {
      this.active = this.$route.meta.mateAdmin
    }
  }
</script>

<style scoped lang="scss">
.main-box-top {
  width: 100%;
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f6f6f6;
  background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
  padding: 0 10px;
  box-sizing: border-box;
  .box-center {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      height: 30px;
    }

    .right {
      width: 150px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: right;

      span {
        display: flex;
        align-items: center;
        margin-left: 5px;
        i {
          color: #666666;
          margin-right: 10px;
          font-size: 24px;
        }

        font-size: 14px;
      }

      a {
        display: flex;
        align-items: center;
        color: #ff5246;
        font-size: 12px;

        i {
          font-size: 18px;
        }
      }
    }
  }

}
.box-1{
  width: 100%;
  padding: 30px 0;
  box-sizing: border-box;
  justify-content: right;
  display: flex;
  flex-wrap: wrap;
  .btn-box{
    width: 200px;
    height: 50px;
    background: #000;
    border-radius: 8px 0 0 8px;
    margin-top: 15px;
    color: #f8f8f8;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
    animation: linear 0.6s openFile;
  }
  @keyframes openFile {
    0%{
     transform: translateX(200px);
    }
    100%{
      transform: translateX(0);
    }
  }
  .boxdef{
    width: 150px;
    height: 50px;
    color: #333;
    background: #f8f8f8;
  }
}

</style>

